<template>
  <div class="kefulist">
    <div class="top">
      <div class="w1200 flex" style="display: flex; justify-content: space-between; align-items: center;height: 80px;">
        <div class="logo"><img :src="srclogo" style=" width: 247px; height: 49px;"></div>
        <!--        <div class="name">添加客服知识</div>-->
        <div class="nava">
          <router-link to="/shangpinlist">商品问题库</router-link>
          <router-link to="/kefulist">客服知识库</router-link>
        </div>
      </div>
    </div>
    <div class="center" ref="center">
      <div class="w1200">
        <div class="centerall">
          <div class="sousuo">
            <div class="c1">客服知识检索</div>
            <div class="c2"><el-input v-model="input"  placeholder="请输入客服问题" style="width: 400px;"></el-input></div>
            <div class="c3" @click="sousuo">检索</div>
            <div class="c3"><router-link to="/kefuzhishi" style="color: #ffffff">添加客服知识</router-link></div>
            <div class="c3"><router-link to="/kefulist/zhishifenlei" style="color: #ffffff">管理知识分类</router-link></div>
          </div>
          <div class="detail flex">
            <div class="dl">
              <div :class="type == item.id ? 'li liact':'li'" @click="changelei(item.id)" v-for="item in typelist" :key="item.id">{{item.name}}</div>

            </div>
            <div class="dr">

              <div class="dli" v-for="item in list" :key="item.id" style=" font-size: 14px; color: #666666">
                <div class="title">{{item.title}}</div>
                <div class="guanjianci">知识点关键词：<span v-for="item2 in item.tag">{{item2}}</span></div>
                <div :class="[item.has ? 'content2':'','content']" v-html="item.content"></div>
                <div v-if="item.has" style="margin-bottom: 20px; color: #65BBFE; cursor: pointer" @click="shouqi(item)">展开查看全部</div>
                <div class="zuozhe flex">
                  <div>创建人：{{item.name}}. 最后编辑时间：
                    <span v-if="item.updated_at == ''">{{item.created_at}}</span>
                    <span v-if="item.updated_at != ''">{{item.updated_at}}</span>
                  </div>
                  <div><span @click="bianji(item.id)">编辑</span> <span @click="shanchu(item.id)">删除</span><span v-if="!item.has" @click="shouqi(item)">收起</span> </div>
                </div>
              </div>
              <el-pagination style="text-align: right" background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default{
    name: 'kefulist',
    data(){
      return{
        msg:"hello",
        srclogo:"./static/img/zhishilogo2.png",
        type:"",
        gaodu:"100px",
        list:"",
        input:"",
        pagesize:20,
        total:0,
        page:1,
        typelist:""
      }
    },
    mounted() {
      this.$refs.center.style.minHeight = document.documentElement.clientHeight - 80 + 'px'

    },
    created() {
      this.gettypelist();
      this.getlist();
    },
    methods:{
      sousuo:function(){
        this.type = ""
        this.page = 1
        this.getlist();
      },
      shouqi:function(ss){
        ss.has = !ss.has
      },
      chakan:function(e){
        console.log(e)
      },
      changelei:function(id){
        this.type = id
        this.getlist();
      },
      //编辑
      bianji:function(id){
        this.$router.push({
          query:{id:id},
          path:"/kefuzhishi"
        })
      },
      gettypelist:function(){
        var that = this
        axios.get('/api/plan-market/question/type/list')
          .then(response => {
            if(response.data.msg.code == 0){
              that.typelist = response.data.data
            }else{
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //删除
      shanchu:function (id) {
        var that = this
        axios.post('/api/plan-market/question/delete', {id:id})
          .then(response => {
            if(response.data.msg.code == 0){
              that.getlist()
            }else{
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye:function(page){
        this.page = page
        this.getlist()
      },
      //获取
      getlist:function(){
        var that = this
        axios.get('/api/plan-market/question/list?tag='+this.input+'&type='+this.type)
          .then(response => {
            if(response.data.msg.code == 0){
              let dd = response.data.data.data

                for(var i in dd){
                  if(dd[i].tag.includes(",")){
                    dd[i].tag = dd[i].tag.split(",")

                  }
                  if(dd[i].tag.includes("，")){
                    dd[i].tag = dd[i].tag.split("，")

                  }
                  that.$set(dd[i],'has',true)
                }

              that.list = dd
              that.total = response.data.data.total
            }else{
              that.$message.error(response.data.msg.info);
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
/deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
  .kefulist{
    margin: 0; padding: 0; background: #ffffff; font-family: "Microsoft JhengHei";
    .w1200{ width: 1200px; margin: 0 auto;}
    .nava{
      a{ color: #ffffff; font-size: 16px; margin-right: 20px; padding: 10px 0; position: relative; top: 10px;}
    }
    .router-link-active{
      border-bottom: 4px #ffffff solid; font-weight: bold;
    }
    .top{ height: 80px; background: #42628D; display: flex; color: #ffffff; font-size: 25px; font-weight: bold;}
    .name{ display: flex; align-items: center; height: 80px;}
    .centerall{ }
    .flex{ display: flex; margin-bottom: 20px;}
    .c1{ width: 100px; line-height: 36px; font-size: 14px; color: #42628D;}
    .sousuo{ background: #EAEAEA; padding: 20px; display: flex; justify-content: center; align-items: center; border: 1px #dddddd solid; margin-top: 30px;}
    .c3{ background: #EE1B4E; color: #ffffff; padding: 0 30px; margin-left: 20px; line-height: 38px; border-radius: 20px; cursor: pointer; font-size: 14px;}
    .detail{ background: #EAEAEA; margin-top: 30px; border: 1px #dddddd solid; }
    .li{ line-height: 44px; width: 180px; text-align: center; cursor: pointer; margin-bottom: 15px;}
    .liact{ background: #42628D; color: #ffffff;}
    .dr{ width: 1020px; background: #ffffff; padding: 50px; box-sizing: border-box;
      .dli{ margin-bottom: 30px;
        /*.title{border-bottom: 1px #E2E2E2 solid; padding-bottom: 20px;}*/
        .guanjianci{ padding: 20px 0;
          span{ background: #65BBFE; color: #ffffff; padding: 3px 20px; border-radius: 5px; margin-right: 10px;}
        }
        .content{  line-height: 25px; margin-bottom: 20px;  transition:all 0.5s;}
        .content2{  max-height: 120px; overflow: hidden; transition:all 0.2s;}
        .zuozhe{ border-bottom: 1px #999 solid; padding-bottom: 20px; justify-content: space-between;
          span{ color: #65BBFE; cursor: pointer; margin-right: 20px;}
        }
      }
    }
  }
</style>
